import { Container } from '@/shared/ui';
import cn from 'classnames';
import Image from 'next/image';

import companyName from '../../images/companyName-table.png';
import Pregnant from '../../images/pregnant.png';
import { ColouredInfoBlock } from '../ColouredInfoBlock';
import cs from './Target.module.scss';

export const Target = () => (
  <Container className={cs.wrapper}>
    <h1 className="h1" id="target">
      Для кого
    </h1>
    <div className={cs.flex}>
      <ColouredInfoBlock className={cs.block}>
        <h2 className="h2">Родителям</h2>
        <p className={cn('p', cs.desc)}>Простое и функциональное приложение</p>
        <Image alt="Pregnant" className={cs.img} height={350} src={Pregnant} unoptimized width={560} />
      </ColouredInfoBlock>
      <ColouredInfoBlock className={cs.block}>
        <h2 className="h2">Малышам</h2>
        <p className={cn('p', cs.desc)}>Правильный и неспешный прикорм</p>
        <Image alt="companyName" className={cs.img} height={350} src={companyName} unoptimized width={560} />
      </ColouredInfoBlock>
    </div>
  </Container>
);
